<template>
  <view class="container">
    <hello-title></hello-title>
    <view style="height: 24px"></view>
    <view class="page-title page-title--no-padding">心率</view>
    <view class="page-title page-title--no-padding page-title--sub">数据来源：华为手环ABC</view>
    <view class="step-main-card">
      <view class="circle-card">
        <view class="content">
          <image :src="heartImage"></image>
        </view>
      </view>
      <view class="detail">
        <view class="detail__row">
          <text class="detail__row--hint">心率</text>
          <text class="detail__row--big">{{ rate }}
            <text>BPM</text>
          </text>
        </view>
      </view>
    </view>
    <view class="data-card-area">
      <view class="data-card data-card--red">
        <view class="data-card__head">
          <text>最大心率</text>
          <view class="data-card__icon data-card__icon--heart"></view>
        </view>
        <view class="data-card__content">
          <text>{{ highRate }}</text>
          <text class="unit">BPM</text>
        </view>
      </view>
      <view style="width:30px"></view>
      <view class="data-card data-card--red">
        <view class="data-card__head">
          <text>最小心率</text>
          <view class="data-card__icon data-card__icon--heart"></view>
        </view>
        <view class="data-card__content">
          <text>{{ lowRate }}</text>
          <text class="unit">BPM</text>
        </view>
      </view>
    </view>
    <view class="data-card data-card--red">
      <view class="data-card__head">
        <text>静息心率</text>
        <view class="data-card__icon data-card__icon--heart"></view>
      </view>
      <view class="data-card__content">
        <text>{{ restRate }}</text>
        <text class="unit">BPM</text>
      </view>
    </view>
    <view class="line-card">
      <view class="line-card__tabs">
        <view class="line-card__tab" @tap="showWeekChart"
              :class="{'line-card__tab--active-red':chartDateType===1}">
          每周
        </view>
        <view class="line-card__tab" @tap="showMonthChart"
              :class="{'line-card__tab--active-red':chartDateType===2}">
          每月
        </view>
      </view>
      <view class="line-card__content" :class="{'line-card__content--hidden':chartDateType!==1}">
        <line-chart id="heart-fast-week" v-if="weekChartData" :config="weekChartData" line-color="#ED7D76"></line-chart>
      </view>
      <view class="line-card__content" :class="{'line-card__content--hidden':chartDateType!==2}">
        <line-chart id="heart-fast-month" v-if="monthChartData" :config="monthChartData"
                    line-color="#ED7D76"></line-chart>
      </view>
    </view>
    <view class="margin-v--normal">
      <button class="button--block button--purple" @tap="showCreateActionSheet">添加数据</button>
    </view>
    <!--    底部操作栏-->
    <AtModal :isOpened="isCreateActionSheetOpen">
      <AtModalHeader>标题</AtModalHeader>
      <AtModalContent>
        <view>
          <view class='input-row'>
            <view class='input-row__label'>心率</view>
            <view class='input-row__content'><input v-model="heartRateInput" type="number" placeholder='请输入'/></view>
          </view>
        </view>
        <view class='input-row'>
          <view class='input-row__label'>静息心率</view>
          <view class='input-row__content'><input v-model="restingHeartRateInput" type="number" placeholder='请输入'/></view>
        </view>
        <view class='input-row'>
          <view class='input-row__label'>高心率</view>
          <view class='input-row__content'><input v-model="fastHeartRateInput" type="number" placeholder='请输入'/></view>
        </view>
        <view class='input-row'>
          <view class='input-row__label'>低心率</view>
          <view class='input-row__content'><input v-model="slowHeartRateInput" type="number" placeholder='请输入'/></view>
        </view>
      </AtModalContent>
      <AtModalAction>
        <button @tap="closeCreateActionSheet">取消</button>
        <button @tap="addRecord">确定</button>
      </AtModalAction>
    </AtModal>
  </view>
</template>

<script>
import "./index.less";
import helloTitle from "../../../common-components/hello-title/hello-title";
import LineChart from "../../../common-components/line-chart/line-chart";
import heartImage from "../../../assets/images/data-heart.svg"
import {getHistoryData} from "../../../services/healthy-data-service";
import findIndex from 'lodash.findindex';
import get from 'lodash.get';
import {AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction} from 'taro-ui-vue'

const {updateHeartRate} = require("../../../services/healthy-data-service");

interface DetailDataResult<T> {
  dayOfMonth: Number,
  dayOfWeek: Number,
  value: T,
}

interface HeartRateResult {
  fastHeartRate: number,
  heartRate: number,
  restingHeartRate: number,
  slowHeartRate: number,
}

export default {
  name: "index",
  components: {
    LineChart,
    helloTitle,
    AtModal, AtModalHeader, AtModalContent, AtModalAction
  },
  data() {
    return {
      heartImage,
      chartDateType: 1,
      weekChartData: null,
      monthChartData: null,
      highRate: 0,
      restRate: 0,
      lowRate: 0,
      rate: 0,
      isCreateActionSheetOpen: false,
      fastHeartRateInput: "",
      heartRateInput: "",
      restingHeartRateInput: "",
      slowHeartRateInput: "",
    }
  },
  methods: {
    async addRecord() {
      await updateHeartRate({
        "fastHeartRate": this.fastHeartRateInput,
        "heartRate": this.heartRateInput,
        "restingHeartRate": this.restingHeartRateInput,
        "slowHeartRate": this.slowHeartRateInput
      });
      await this.initData();
    },
    async initData() {
      this.isCreateActionSheetOpen = false;
      const weekResult = await getHistoryData("DAY_OF_WEEK", "HEART_RATE");
      const monthResult = await getHistoryData("DAY_OF_WEEK", "HEART_RATE");
      console.log("心率健康数据", weekResult);
      this.highRate = get(weekResult[weekResult.length - 1], `value.fastHeartRate`, 0);
      this.lowRate = get(weekResult[weekResult.length - 1], `value.slowHeartRate`, 0);
      this.rate = get(weekResult[weekResult.length - 1], `value.restingHeartRate`, 0);
      this.restRate = get(weekResult[weekResult.length - 1], `value.fastHeartRate`, 0);
      this.weekChartData = this.formatChartData(weekResult, 7);
      this.monthChartData = this.formatChartData(monthResult, 30);
      console.log(this.weekChartData);
    },
    showCreateActionSheet() {
      this.isCreateActionSheetOpen = true;
    },
    closeCreateActionSheet() {
      this.isCreateActionSheetOpen = false;
    },
    showWeekChart() {
      this.chartDateType = 1;
    },
    showMonthChart() {
      this.chartDateType = 2;
    },
    // 把数据格式化成 ${daysNumber} 天的数据
    formatChartData(data, daysNumber: number) {
      const baseConfig = {
        yAxis: {
          unit: 1,
          base: 50,
          top: 140,
          display: [
            // 必须按顺序
            {value: 50, label: "50"},
            {value: 90, label: "90"},
            {value: 120, label: "120"},
            {value: 140, label: "140"},
          ],
        },
        dataset: [],
      }
      for (let i = 1; i <= daysNumber; i++) {
        const index = findIndex(data, (item) => item.dayOfWeek === i);
        baseConfig.dataset.push({value: get(data[index], "value.fastHeartRate", 0)});
      }
      return baseConfig;
    }
  },
  async created() {
    await this.initData();
  }
}
</script>
